<template>
  <div class="tabbar-wrapper">
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/health" icon="chart-trending-o">健康</van-tabbar-item>

      <!-- 医生角色显示工作台，其他角色显示问诊 -->
      <van-tabbar-item
        :to="userStore.isDoctor ? '/doctor' : '/consultation'"
        icon="chat-o"
      >
        {{ userStore.isDoctor ? '工作台' : '问诊' }}
      </van-tabbar-item>

      <van-tabbar-item to="/users" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>

    <!-- 快捷录入按钮 -->
    <van-button
      class="quick-add-btn"
      type="primary"
      icon="plus"
      round
      @click="router.push('/health/daily')"
    >
      快捷录入
    </van-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const active = ref(0)
const userStore = useUserStore()
</script>

<style lang="scss" scoped>
.tabbar-wrapper {
  position: relative;

  .quick-add-btn {
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 100;
    padding: 0 20px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}
</style>
